<!DOCTYPE html>  
<html>  
  <head>  
    <title>Demo 17</title>
    <style>
.container {  
    width: 206px;  
    height: 206px;  
    border: 1px solid black;  
    display: flex;  
    margin: 15px;  
    background-color: blue;  
}  
  
.ft1{  
    flex: 0 50px; // flex-grow, flex-basis
}  
.ft2{  
    flex: 2 2; // flex-grow, flex-shrink
}
.ft, .ft1, .ft2 {
background-color: red;
margin: 1px;
}
</style>  
  </head>  
  <body>
    <div class="container">  
       <div class="ft" style="width: 50px;"></div>  
       <div class="ft" style="flex-grow: 2;"></div>  
       <div class="ft" style="flex-grow: 1;"></div>  
    </div>  
<br/>
<div class="container" style="flex-direction: column;">  
<div class="ft1">  
</div>  
<div class="ft1">  
</div>  
<div class="ft1">  
</div>  
</div>  
<br/>
    <div class = "container">  
       <div class="ft" style="width: 100px; flex-shrink: 1;"></div>  
       <div class="ft" style="width: 100px; flex-shrink: 2;"></div>  
       <div class="ft" style="width: 100px; flex-shrink: 1;"></div>  
    </div>
  </body>
</html>